import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

export default class StatPanel extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          stat:[]
        }
    }

    componentDidMount() {
        let me = this;
        let taskId = me.props.location.query.taskId;
        fetch('http://localhost:8080/stat/view', {
            method: 'POST',
            mode: 'cors',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
            body: JSON.stringify({ taskId: taskId})
        })
        .then(res => res.json())
        .catch(error => console.error('Fetch Error:', error))
        .then(function (result) {
          me.setState({
              stat:result.data
          })
        });
    }

	render(){
        let taskId = this.props.location.query.taskId;
        let data1 = {cloneType:0, taskId:taskId};
        let data2 = {cloneType:1, taskId:taskId};
        let path1 = {
            pathname:'/pair',
            query:data1,
        }
        let path2 = {
            pathname:'/pair',
            query:data2,
        }
		return (
		<div class="page page-limited">
		    <div class="code-components">
		        <div id="code-search" class="code-search">
                    <Link to="/task"><button>首页</button></Link>
                    &nbsp;&nbsp;&nbsp;
                    <Link to="/task"><button>上一页</button></Link>
                </div>

		        <div class="boxed-group boxed-group-inner spacer-top">
		            <div class="overview-main page-main">
                        <div class="overview-quality-gate">
                            <h3>检测统计</h3>
		                </div>
		                <div class="overview-domains-list">

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">检测任务ID</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.taskId}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">项目名称</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.projectName}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">文件数目</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.fileNum}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">克隆对数目</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.clonePairNum}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">I,II型克隆对数目</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.type12Num}</span>
                                    &nbsp;&nbsp;&nbsp;
                                    <Link to={path1}><button>详情</button></Link>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">III型克隆对数目</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.type3Num}</span>
                                    &nbsp;&nbsp;&nbsp;
                                    <Link to={path2}><button>详情</button></Link>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">预处理用时</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.preTime}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">比较用时</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.cmpTime}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

                        <div class="coding-rule"><table class="coding-rule-table"><tbody><tr>
                                <td>
                                <div class="coding-rule-title">
                                    <span class="note">检测时间</span>
                                </div>
                                </td>
                                <td class="coding-rule-table-meta-cell">
                                <div class="coding-rule-meta">
                                    <span class="note">{this.state.stat.createTime}</span>
                                </div>
                                </td>
                        </tr></tbody></table></div>

		                </div>
                    </div>
                </div>
            </div>
        </div>
		);
	}
}